<template>
	<view class="page-content">

		<swiper class="swiper"    display-multiple-items="5" :autoplay="false" >
		   <swiper-item v-for="(item,index) in typeList" class="itemType " :class="[item.value==searchForm.status && 'on']" @tap="tabSelect(item.value)"  >
					<view >{{item.label}}</view>
			</swiper-item>

		</swiper>
		<scroll-view v-if="listData.records.length > 0" style="white-space: normal;" class="order-list-wrap" scroll-y @scrolltolower="scrolltolower">
			<!-- <view class="order-list">
				<view v-for="item in listData.records" :key="item.orderNo" class="order-item" @tap="toDetail(item)">
					<view class="order-header">
						<text class="shop-name">{{item.createTime}}</text>

						<text  class="order-status " :class="'order-status'+item.orderStatus">
							<text class="order-status-cancel-reason" v-if="item.orderStatus==3007&&item.cancelReason">{{item.cancelReason}}</text>

							{{item.orderStatusName||''}}
						</text>

					</view>
					<view class="order-content">
						<view class="houseinfo">
							<houseInfo :house="item" v-if="item.houseName" ></houseInfo>
						 </view>
						<view class=" house-time"   v-if="item.orderStatus<3003" >
							<view class="date-value">
								<view class="value">{{item.startDate}}</view>
								<view class="title">入住</view>
							</view>
							<view class="date-value">共{{ item.days }}晚</view>
							<view class="date-value">
								<view class="value">{{item.endDate}}</view>
								<view class="title">离店</view>
							</view>
						</view>
						<view class="payinfo" >
							<text class="title">{{item.payStatusName||''}}</text>
							<text class="price">￥{{item.totalAmount}}</text>



						</view>

						<view  v-if="item.orderStatus<=3004">
							<view class="action"  v-if="item.orderStatus == 3001">
								<div class="tip" >若房东2小时内未确认订单，平台将自动为您取消，款项全额原路退回。</div>
							</view>

							<view class="action" v-if="item.channel!='7'">
								<view class="btn-action"  :class="[item.orderStatus == 3000?'btn-action-pay':'']">
									<text v-if="item.orderStatus == 3000">立即支付</text>
									<text v-if="item.orderStatus == 3001">取消订单</text>
									<text v-if="item.orderStatus == 3002">取消订单</text>
									<text v-if="(item.orderStatus == 3003||item.orderStatus == 3004 ) &&!item.commentFlag">去评价</text>
									<text v-if="(item.orderStatus == 3003||item.orderStatus == 3004 ) &&item.commentFlag">查看评价</text>
								</view>
							</view>
							<view v-else >
								<view class="action" v-if="item.orderStatus != 3002 && item.orderStatus != 3001 ">
									<view :class="[item.orderStatus == 3000?'btn-action-pay':'']">
										<text class="btn-action dis-b" v-if="item.orderStatus == 3000">立即支付</text>
										<text class="btn-action dis-b" v-if="(item.orderStatus == 3003||item.orderStatus == 3004 ) &&!item.commentFlag">去评价</text>
										<text class="btn-action dis-b" v-if="(item.orderStatus == 3003||item.orderStatus == 3004 ) &&item.commentFlag">查看评价</text>
									</view>
								</view>
							</view>
						 	
							
						 </view>

					</view>


				</view>
			</view> -->
			<view class="order-list">
				<view v-for="item in listData.records" :key="item.orderNo" class="order-item mb-46" >
					<view class="order-time fontS26">
						{{item.createTime}}
					</view>
					
					<view class="order-content">
						
						 <view class="houseinfo">
						 	<view class="flex " @tap="toDetail(item)">
						 		<image class="img-136 bor-r16" :src="item.houseCover" mode="aspectFill"></image>
								<div class="house-right ml-16">
									<div class="flex align-center">
										<div class="fontE1 font-500 PingFangSC-Medium house-title">{{item.houseName}}</div>
										<div v-if="item.orderStatusName=='已取消'" class="ml-auto font-500 PingFangSC-Medium color-b6">{{item.orderStatusName}}</div>
										<div v-if="item.orderStatusName=='待确认'" class="ml-auto font-500 PingFangSC-Medium color-orange">{{item.orderStatusName}}</div>
										<div v-if="item.orderStatusName=='已完成'" class="ml-auto font-500 PingFangSC-Medium color-mainG">{{item.orderStatusName}}</div>
									</div>
									<div class="flex align-center mt-24">
										<div class="fontS24 color-6">入住：{{item.startDate}}</div>
										<div class="ml-auto fontS28">￥<text class="DINAlternate">{{item.totalAmount}}</text></div>
									</div>
									<div class="flex align-center mt-4">
										<div class="fontS24 color-6">离店：{{item.endDate}}</div>
										<div class="ml-auto fontS24 color-6">共{{item.days}}晚</div>
									</div>
								</div>
								
						 	</view>
							
							<view  class="mt-16">
						
								<view class="action" v-if="item.channel!='7'">
									<view class="flex align-center"  >
										<view class="ml-auto flex align-center">
											<button open-type="contact" class="btn-action ">咨询客服</button>
											<view @click="cancelOrder(item)" :class="[item.orderStatus == 3000?'btn-cancle ml-16':'']" v-if="item.orderStatus == 3000">取消订单</view>
											<view @click="cancelOrderPage(item)" class="btn-cancle ml-16" v-if="item.orderStatus == 3001">取消订单</view>
											<view @click="cancelOrderPage(item)" class="btn-cancle ml-16" v-if="item.orderStatus == 3002">取消订单</view>
											<view @click="toPay(item)" :class="[item.orderStatus == 3000?'btn-action-pay ml-16':'']" v-if="item.orderStatus == 3000">立即支付</view>
											
											
											<view @click="toHouseDetail(item)" class="btn-action-pay ml-16" v-if="(item.orderStatus == 3003||item.orderStatus == 3004 ||item.orderStatus == 3007)">再次购买</view>
											
										</view>
										
									</view>
								</view>
								<view class="action" v-else>
									<view class="flex align-center"  >
										<view class="ml-auto flex align-center">
											<button open-type="contact" class="btn-action ">咨询客服</button>
											<view @click="toPay(item)" :class="[item.orderStatus == 3000?'btn-action-pay ml-16':'']" v-if="item.orderStatus == 3000">立即支付</view>
											
											 
											<view @click="toHouseDetail(item)" class="btn-action-pay ml-16" v-if="(item.orderStatus == 3003||item.orderStatus == 3004 ||item.orderStatus == 3007)">再次购买</view>
											
										</view>
										
									</view>
								</view>
								
							 	
								
							 </view>
							 <view class="action mt-24" v-if="item.orderStatus == 3001">
							 	<div class="tip fontS24" >若房东2小时内未确认订单，平台将自动为您取消，款项全额原路退回。</div>
							 </view>
						 </view>
						
						
								
						
								
					</view>
					
								
								
				</view>
			</view>
		</scroll-view>
		<without v-else></without>
	</view>
</template>

<script>
	let app = getApp();
	import { getMyOrder,cancelOrderNew,payOrder } from '../../api/order.js'
	import { parseTime } from '../../utils/index.js'
	export default {
		components: {
		 

		},
		data() {

			return {
				typeList: [{
					value: '',
					label: '全部'
				},{
					value: 3000,
					label: '待支付'
				},{
					value: 3001,
					label: '待确认'
				},{
					value: 3002,
					label: '待入住'
				},{
					value: 3003,
					label: '已入住'
				},{
					value: 3004,
					label: '待评价'
				},{
					value: 3005,
					label: '已完成'
				},{
					value: 3007,
					label: '已取消'
				}],
				// WAIT_COMMIT(3001, "待确认"),
				//    ORDER_PAYED(3002, "待入住"),
				//    ORDER_TRAVELING(3003, "已入住"),
				//    WAIT_COMMENT(3004, "待评价"),
				//    ORDER_END(3005, "已完成"),
				//    CANCEL_ORDER(3007, "已取消"),
				//    DELETE_ORDER(3008, "已删除");
				searchForm: {
					status: '',
					limit: 10,
					page: 1
				},
				listData: {
					records: []
				},
				allLoad: false
			};
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.searchForm.page = 1;
			this.getData()
		},
		watch: {
			'searchForm.status'() {
				this.searchForm.page = 1;
				this.getData()
			}
		},
		onLoad(opt){
			if(opt.status){
				this.searchForm.status=opt.status;
			}
			this.getData();
		},

		onShow() {
			if(app.globalData.currOrderDetail){

				this.updateOrder(app.globalData.currOrderDetail)
				app.globalData.currOrderDetail=null;
			}

			this.searchForm.page = 1;
			this.getData()
		},
		methods: {
			cancelOrderPage(item){
				console.log('取消订单')
				if(item.orderStatus>=3003){
					uni.showToast({
						title:"不可取消",
						icon:'none'
					})
					return;
				}
					
				uni.navigateTo({
					url:"/pages/order/cancelCheck?orderNo="+item.orderNo
				})
				
					
			},
			cancelOrder(item) {
				
				
				uni.showModal({
					content: '是否确定取消订单？',
					success: res => {
						if(res.confirm){
							cancelOrderNew({orderId:item.orderNo}).then(res=>{
								this.getData();
							})
						}
					},
					fail: () => {},
					complete: () => {}
				}); 
			
				
			},
			// 立即支付
			toPay(item) {
				let _this = this;
				
				let params = {
					orderNo: item.orderNo,
				 
					 
				}
				payOrder(params).then(res => {
					console.log('topay', res);
					// #ifdef H5
						if (res && res.data) {
							console.log('should go pay')
							console.log('res data', res.data);
							// 快手支付
							// 先返回到订单
							uni.redirectTo({
								url:"../../pages/user/myOrder"
							})
							if (window.ks) {
								
								window.ks.navigateTo({url: `pages/pay/index?payload=${encodeURIComponent(JSON.stringify(res.data))}`});
								return;
							}
							
							
							
							// H5支付
							// window.location.href = res.data.mwebUrl;
							// const url = encodeURIComponent(res.data.mwebUrl);
							// uni.redirectTo({
							// 	// url: "/pages/pay/pay?url=res.data.mwebUrl"
							// 	url: `/pages/pay/pay?orderNo=${params.orderNo}&url=${url}`
							// })
						}
					
						return;
					// #endif
					
					let {
						appId,
						nonceStr,
						packageValue,
						paySign,
						signType,
						timeStamp
					} = res.data
					
					
					let data  = {
						success: function(res) {
							let isSuccess =true; 
							//#ifdef MP-TOUTIAO
								if(res.code !=0){
									isSuccess=false;
								}
							//#endif
							if(isSuccess){
								console.log('支付成功')
								//支付成功
								// uni.showToast({
								// 	title:"支付成功",
								// 	icon:"success"
								// })
								// uni.redirectTo({
								// 	url:"../../pages/user/myOrder"
								// })
								_this.$refs.popup.open()
								_this.getData() 
								
							}else{
								uni.showToast({
									title:"支付失败",
									icon:"none"
								})
							}
							
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							
							// uni.showToast({
							// 	title:"支付失败",
							// 	icon:"none"
							// })
							console.log('fail:' + JSON.stringify(err));
						}
					};
					//#ifdef MP-BAIDU
						data.orderInfo = res.data
					//#endif
					
					//#ifdef MP-WEIXIN
						data.timeStamp = timeStamp;
						data.nonceStr = nonceStr;
						data.package = packageValue;
						data.signType = signType;
						data.paySign = paySign
					//#endif
					
					
					//#ifdef MP-TOUTIAO
						data.orderInfo = res.data;
						data.service=5;
						//固定值：1（拉起小程序收银台）开发者如果不希望使用字节跳动小程序收银台，service设置为3/4时，可以直接拉起微信/支付宝进行支付：service=3： 微信API支付，不拉起小程序收银台；service=4： 支付宝API支付，不拉起小程序收银台。其中service=3、4，仅在1.35.0.1+基础库(头条743+)支持
						data.getOrderStatus=(res)=>{
							console.log("getOrderStatus",res)
							
						}
					//#endif
					
						 
					
					// 调起微信支付
					uni.requestPayment(data)
				})
				
				
			},
			toHouseDetail(item){
				console.log(item)
				uni.navigateTo({
					url:'/pages/indexs/index?houseId=' + item.houseSn
				})
			},
			tabSelect(type) {
				this.searchForm.status = type;
			},
			updateOrder(detail){
				for (var i = 0; i < this.listData.records.length; i++) {
					if(this.listData.records[i].orderNo==detail.orderNo){
						detail= this.__initOrderItem(detail);
						this.$set(this.listData.records,i,detail);
						break ;
					}
				}

			},
			__initOrderItem(item){


				item.createTime = parseTime(item.createTime );
				item.startDate  = parseTime(item.checkInDate,'{m}月{d}日')
				item.endDate  = parseTime(item.checkOutDate,'{m}月{d}日')
				item.days =  parseInt((item.checkOutDate - item.checkInDate) / (24 * 3600 * 1000));
				if(item.orderStatus>=3003){
					item.other = item.startDate + " - " + item.endDate + " 共 "+item.days +" 晚"
				}
				item.totalAmount  = parseFloat(item.totalAmount).toFixed(2);


				return item;
			},
			getData() {
				let params = Object.assign({}, this.searchForm);
				getMyOrder(params).then(res => {
					let { current, total, size, records } = res.page;
					let list = this.listData.records;
					for (var i = 0; i < records.length; i++) {

						records[i]= this.__initOrderItem(records[i]);
					}

					if(params.page === 1) {
						list = []
					}
					this.listData.records = list.concat(records);


					if(current >= Math.floor(total / size) + 1){
						this.allLoad = true;
					}else {
						this.allLoad = false;
					}
				})
			},
			scrolltolower() {
				if(this.allLoad) {
					return
				}
				this.searchForm.page++;
				this.getData();
			},
			parseTime(time) {
				return parseTime(new Date(time))
			},

			toDetail(item) {
				let orderNo = item.orderNo;
				let shopId = item.shopId;
				uni.navigateTo({
					url: '/pages/order/detail?orderNo=' + orderNo +"&shopId="+shopId +"&isList="+1
				})
			}
		}
	}
</script>

<style lang="scss" >


	.swiper{  width: 100%; z-index: 1000;
	    background: #FFFFFF;   height:90upx;
	 line-height: 90upx;  text-align: center; font-size: 28upx; color:#666666;}
	.swiper .on{color:#FF5777;}

	.itemType{ position: relative;}
	.itemType.on:after{ position: absolute;bottom:8upx;left:50%; transform: translateX(-50%); content: ''; display: block;
	width: 36upx; height:14upx; background: url(https://mini-client-base-pic.oss-cn-beijing.aliyuncs.com/wx/index_tab_on.png) no-repeat; background-size: 36upx;;
	}

	.order-item{
		position:relative;
		width: 100%; 
		// background: #fff;
		padding:0 24rpx;
		.order-time{
			display: inline-block;
			border-radius: 200rpx;
			background:#F0F1F5;
			color:#999;
			padding:10rpx 20rpx;
			
		
		}
		.order-header{
			padding:0 30upx;
			height: 92upx; display:flex;justify-content: space-between; font-size:28upx;color:#333333;
			align-items: center;
			border-bottom:1upx solid $item-bottom-border-color;

		}
		margin-top: 14upx;


		.order-status{
			 font-size: 28upx;
			 color:#303133;
			 .order-status-cancel-reason{
			 	font-size: 24upx;
			 	color: #ccc;  margin-right:10upx
			 }
		}
		.order-status3000,.order-status3001{
			 color:#E6A23C;
		}

		.order-status3005,.order-status3007{
			 color:#9296A0;
		}

		.order-content{

			background: #fff;
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.05);
				
			margin-top: 20upx;
			padding:20upx;
			.houseinfo{
				// padding-bottom: 20rpx;
				.house-right{
					width: calc(100% - 152rpx);
					.house-title{
						width: calc(100% - 120rpx);
					}
					
				}
			}
			.house-time{
				padding-right: 30upx;
				
				border-top:solid #eee 1upx;
			}
			.payinfo{
				line-height: 112upx;
				border-top:solid #eee 1upx;
				display: flex;
				justify-content: space-between;
				padding: 0 20upx;
				padding-right: 30upx;
				font-size: 28upx;color:#303133;
				.price{
					font-size: 32upx;color:#F54B64;
				}
			}
			.action{
				height: 80upx; display:flex;justify-content: flex-end;
				align-items: center;
				// border-top:solid #eee 1upx;
				.tip{
					padding-top: 24rpx;
					
					color:#FF9900;
					font-size: 24upx;
					width: 100%;
					border-top: 1px solid #e2e2e2;
					
				
				}
				.btn-action{
					box-sizing: border-box;
					
					line-height: 68upx;
					
					border: 1upx solid #DCDFE6;width:172rpx;
					border-radius: 16upx;
					font-size: 28upx;color:#909399;
					text-align: center;
					// margin-right: 30upx;
					
						
						
				
					
				}
				.btn-action-pay{
					line-height: 70rpx;width:172rpx;
					border-radius: 16upx;
					font-size: 28upx;
					text-align: center;
					height: 70rpx;
					
					border: none;background: #F5CE00;color:#191A1E;
				}
				.btn-cancle{
					height: 70rpx;
					background:#fff;line-height: 70rpx;width: 172upx;
					border-radius: 16upx;
					font-size: 28upx;color:#909399;
					background:#f7f7f7;
					text-align: center;
				}
				
				
				
				
			}



		}


	}

	.page-content{
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.order-list-wrap{
		flex: 1;
		overflow: hidden;
		display:flex;
	}
	.dis-b{
		display:block;
	}



</style>
